<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>
    <div>
        <span class="layui-breadcrumb">
            <a href="javascript:;">首页</a>
            <a href="javascript:;">用户管理</a>
            <a><cite>用户列表</cite></a>
        </span>
    </div>

    <div>
        <input type="text">
    </div>
    <table class="layui-table">
        <colgroup>

        </colgroup>
        <thead>
            <tr>
                <th>昵称</th>
                <th>性别</th>
                <th>电话</th>
                <th>生日</th>
                <th>注册时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="container">




        </tbody>
    </table>
    <div style="display: flex;justify-content: center;">
        <div id="test1"></div>
    </div>
    <script id="demo" type="text/html">
        <ul>
            {{#  layui.each(d.userlist, function(index, item){ }}
            <tr>
                <td>{{item.nickname}}</td>
                <td>{{fmtGender(item.gender)}}</td>
                <td>{{item.tel}}</td>
                <td>{{item.birthday}}</td>
                <td>{{item.regDate}}</td>
                <td>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
                        <i class="layui-icon">&#xe615;</i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                        <i class="layui-icon">&#xe642;</i>
                    </button>
                    <button type="button" class="layui-btn del layui-btn-danger layui-btn-sm">
                        <i class="layui-icon">&#xe640;</i>
                    </button>
                </td>
            </tr>
            {{#  }); }}
        </ul>
    </script>

    <script src="../../layui/layui.js"></script>
    <script>
        function fmtGender(val) {
            switch (val) {
                case 0:
                    return "男"
                case 1:
                    return "女"
                default:
                    return "未知"
            }
        }

        layui.use(['element', 'laypage', 'jquery', 'laytpl'], function () {
            var element = layui.element;
            var laypage = layui.laypage;
            var $ = layui.jquery;
            var laytpl = layui.laytpl;

            laypage.render({
                elem: 'test1',
                count: 50
            });


            $.get("https://easy-mock.com/mock/5cff0890f162b656d59a664e/admin/userlist", data => {
                laytpl($("#demo").html()).render(data, function (html) {
                    $('#container').html(html)
                });
            })

            $("#container").on("click", ".del", function () {
                top.layer.confirm('确定删除吗?', {
                    icon: 3,
                    title: '温馨提示'
                }, (index) => {
                    $(this).parents("tr").remove()
                    top.layer.close(index);
                });
            })
        });
    </script>
</body>

</html>